<template>
	<div class="days-board-component">
		<div class="days-board">
			<div class="board-title">计划 Plan</div>
			<div class="days-count">
				<div class="number-layout">
					<span class="count-number">{{days.number1}}</span>
					<span class="unit">{{unit}}</span>
				</div>
			</div>
		</div>
		<div class="divider"></div>
		<div class="days-board">
			<div class="board-title">实际 Actual</div>
			<div class="days-count actual">
				<div class="number-layout">
					<span class="count-number">{{days.number2}}</span>
					<span class="unit">{{unit}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	days:{
		type:Object,
		default:function(){
			return {
				number1:0,
				number2:0
			}
		}
	},
	unit:{
		type:String,
		default:'unit'
	}
})
</script>

<style scoped lang="scss">
.days-board-component{
	$dividerSize:.14em;
	height: 100%;
	box-sizing: border-box;
	padding: 0 $dividerSize;
	display: flex;
	color: white;
	.divider{
		width: $dividerSize;
		flex-shrink: 0;
	}
	.days-board{
		width: 1px;
		flex-grow: 1;
		background-color: #031E4F;
		border-radius: .05em;
		display: flex;
		flex-direction: column;
		.board-title{
			flex-shrink: 0;
			font-size: .55em;
			text-align: center;
			padding-top: .7em;
		}
		.days-count{
			flex-grow: 1;
			height: 1px;
			display: flex;
			align-items: center;
			justify-content: center;
			.number-layout{
				display: flex;
				justify-content: center;
				align-items: baseline;
			}
			.count-number{
				font-family: electronicFont;
				font-size: 1em;
			}
			.unit{
				margin-left: .4em;
				font-size: .3em;
			}
			&.actual{
				color: #DBDD07;
			}
		}
	}
}
</style>